/* eslint-disable function-paren-newline */
import React, { Component } from 'react';
import { Layout, Card, Checkbox, Button, Table, Icon, Menu, Tabs } from 'antd';
import * as commonUtils from '../../utils/utils';
import * as config from '../../utils/config';
import styles from '../../index.less';
import logo from '../../assets/footer_logo.png';
import CommonChar from '../CommonChar/CommonChar';


const { Sider, Content, Footer } = Layout;
const { TabPane } = Tabs;

class IndexCenter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [{
        title: '编号',
        dataIndex: 'iOrder',
        width: '6%',
        render: text => <div className={styles.editSpan}><span>{text}</span></div>,
      }, {
        title: '部门',
        dataIndex: 'sDepart',
        width: '15%',
        render: text => <div className={styles.editSpan}><span>{text}</span></div>,
      }, {
        title: '今日事务',
        dataIndex: 'dToDayNum',
        width: '10%',
        render: text => <div className={styles.editSpan}><span>{text}</span></div>,
      }, {
        title: '未清总数',
        dataIndex: 'dTobeDone',
        width: '8%',
        render: text => <div className={styles.editSpan}><span>{text}</span></div>,
      }, {
        title: '时效',
        dataIndex: 'dLimitation',
        width: '6%',
        render: text => <div className={styles.editSpan}><span>{text}</span></div>,
      }, {
        title: '工作事项',
        dataIndex: 'sMenuUnMemo',
        width: '25%',
        render: text => <div className={styles.editSpan}><span>{text}</span></div>,
      }, {
        title: '内容',
        dataIndex: 'sMenuWorkFruit',
        render: text => <div className={styles.editSpan}><span>{text}</span></div>,
      }],
      comParameterList: [],
      dToDayNumSum: 0, /* 今日事务 */
      dTobeDoneSum: 0, /* 未制单 */
      tabsPanes: [],
      bFilter: 'Pending,PendingCheck,MyWarning',
    };
  }

  componentWillMount() {
    setTimeout(() => {
      this.handleGetModelCenter('init');
      const commonUrl = `${config.server_host}parameter/getParameter?sModelsId=100`;
      this.props.onGetComParameter(commonUrl);
    }, 0);
  }

  componentWillReceiveProps(nextProps) {
    const { modelCenter, comParameter } = nextProps.app;
    const { dToDayNumSum, dTobeDoneSum, model } = modelCenter;
    const comParameterList = [];
    comParameter.forEach((child) => {
      comParameterList.push(
        <Menu.Item key={child.sFormId} data-sname={child.sFormUrl} data-sModelsType={child.sModelType}>
          {child.sFormName}<Icon type="close" onClick={e => this.handleDelCommonMenu(e, child)} />
        </Menu.Item>);
    });
    const tabsPanes = [];
    if (model !== undefined) {
      Object.keys(model).forEach((child) => {
        const name = child.split('_')[0];
        const num = child.split('_')[1];
        const key = commonUtils.createSid();
        const data = model[child];
        tabsPanes.push(
          <TabPane tab={<div className={styles.tabsNative}>{name}<span>({num})</span></div>} key={key}>
            <Table
              columns={this.state.columns}
              dataSource={data}
              size="middle"
                  // bordered
              pagination={false}
              scroll={{ x: '100%', y: 'calc(~"100vh - 365px")' }}
              id="kpiTable"
              onRow={(record) => { return { onDoubleClick: () => { this.handleDoubleClick(record); } }; }}
            />
          </TabPane>);
      });
      this.setState({
        tabsPanes,
      });
    }
    this.setState({ comParameterList, dToDayNumSum, dTobeDoneSum });
  }

  handleDoubleClick = (record) => {
    const newsId = record.sId; /* 表格行的sId */
    const newKey = new Date().getTime().toString();
    const route = record.sName;
    const title = record.sMenuUnMemo;
    const pane = {
      title, route, formId: newsId, key: newKey,
    };
    this.props.onAddPane(pane);
  };

  handleGetModelCenter = (type) => {
    let value = {
      bFilter: this.state.bFilter,
    };
    let centerUrl = '';
    if (type === 'init') {
      value = {
        bFilter: '',
      };
      centerUrl = `${config.server_host}modelCenter/getModelCenter?sModelsId=100`;
    } else {
      centerUrl = `${config.server_host}modelCenter/getModelCenterCalculation?sModelsId=100`;
    }
    this.props.onGetModelCenter(value, centerUrl);
  };

  handleDelCommonMenu = (e, child) => {
    e.stopPropagation();
    const { sFormId } = child;
    const value = { sFormId };
    const delUrl = `${config.server_host}parameter/deleteParameter?sModelsId=${sFormId}`;
    this.props.onDelParameter(value, delUrl);
  };

  handleTabClick = (e) => {
    /* 点击有sName的菜单，增加标签页 */
    const paneKey = new Date().getTime().toString();
    /* Tab标签Id */
    const formId = e.key;
    /* 窗体Id */
    const route = e.item.props['data-sname'];
    const sModelsType = e.item.props['data-sModelsType'];
    const title = e.item.props.children[0];
    const pane = {
      title, route, formId, key: paneKey, sModelsType,
    };
    this.props.onAddPane(pane);
  };

  handleCheckBoxChange = (checkedValues) => {
    const bFilter = checkedValues.join(',');
    this.setState({
      bFilter,
    });
  };

  render() {
    const {
      comParameterList, dToDayNumSum, dTobeDoneSum, tabsPanes,
    } = this.state;
    const ExtraWrap = (
      <div className={styles.extraWrap}>
        <Checkbox.Group
          className={styles.extraCheckBox}
          onChange={this.handleCheckBoxChange}
          defaultValue={['Pending', 'PendingCheck', 'MyWarning']}
        >
          <Checkbox value="Pending">待处理</Checkbox>
          <Checkbox value="PendingCheck">待审核</Checkbox>
          <Checkbox value="MyWarning">我的预警</Checkbox>
        </Checkbox.Group>
        <Button type="primary" icon="bank" onClick={this.handleGetModelCenter}>计算工作量</Button>
      </div>
    );
    return (
      <div className={styles.indexCenter}>
        <Layout id="kpi">
          <Content className={styles.kpi}>
            <Card title="KPI监控" extra={ExtraWrap}>
              <div className={styles.extraCalc}>
                <p>今日事务: <span>{dToDayNumSum}</span></p>
                <p>未清总数: <span>{dTobeDoneSum}</span></p>
              </div>
              <div id="indexTabs">
                <Tabs className={styles.indexTabs}>
                  {tabsPanes}
                </Tabs>
              </div>
            </Card>
          </Content>
          <Sider width={230} style={{ background: '#888' }} className={styles.commonOpt} id="commonOpt">
            <Card title="常用操作">
              <Menu
                onClick={this.handleTabClick}
                mode="inline"
              >
                { comParameterList }
              </Menu>
            </Card>
          </Sider>
        </Layout>
        <CommonChar {...this.props} />
        <Footer className={styles.indexFooter}>
          <img alt="logo" src={logo} style={{ marginRight: 10 }} />
          ©2014-2018 小羚羊软件股份 | xlyprint.com | 印刷电商平台  文件智能处理   自动拼版   印刷ERP   400-880-6237
        </Footer>
      </div>
    );
  }
}

export default IndexCenter;
